<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="/erp/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/erp/css/style.css"/>
    <link href="/erp/assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="/erp/assets/css/ace.min.css" />
    <link rel="stylesheet" href="/erp/assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="/erp/assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="/erp/assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="/erp/js/jquery-1.9.1.min.js"></script>
    <script src="/erp/assets/js/bootstrap.min.js"></script>
    <script src="/erp/assets/js/typeahead-bs2.min.js"></script>
    <script src="/erp/assets/layer/layer.js" type="text/javascript" ></script>
    <script src="/erp/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="/erp/assets/js/jquery.ui.touch-punch.min.js"></script>
<!--    <script src="/erp/assets/js/ace-elements.min.js"></script>-->
<!--    <script src="/erp/assets/js/ace.min.js"></script>-->

    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
    <script th:src="@{/plugins/layui/layui.js}" ></script>

    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <title>激光打印机管理</title>

</head>

<body>

<div class="margin clearfix">
    <div class="stystems_style">
        <div class="tabbable">
            <div class="page-content clearfix">
                <div id="Member_Ratings">
                    <div class="tab-content">

                        <div id="home" class="tab-pane active">
                            <div class="search_style">
                                <ul class="search_content clearfix">
                                    <li><label class="l_f">查询打印机：</label><input id="fuzzyNum" name="" type="text"  class="text_add" placeholder="输入打印机编号"  style=" width:400px"/></li>
                                    <li style="width:90px;"><button id="btnSearch" type="button" class="btn_search"><i class="icon-search"></i>查询</button></li>
                                </ul>
                            </div>
                            <input type="hidden" id="shuxin"/>

                            <!---->
                            <div class="border clearfix">
                                <span class="l_f">
                                 <a href="javascript:ovid()" id="member_add" class="btn btn-warning"><i class="icon-plus"></i>添加打印机</a>
                                <a href="javascript:ovid()" class="btn btn-danger" id="delete"><i class="icon-trash"></i>批量删除</a>
                                </span>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="sample-table">
                                <thead>
                                <tr>
                                    <th width="25"><label><input type="checkbox" id="btnAllChk" class="ace"><span class="lbl"></span></label></th>
                                    <th width="150">打印机编号</th>
                                    <th width="80">服务器</th>
                                    <th width="150">描述</th>
                                    <th width="150">可打型号</th>
                                    <th width="120">IP地址</th>
                                    <th width="80">责任产线</th>
                                    <th width="250">备注</th>
                                    <th width="250">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--添加打印机图层-->
                    <div class="add_menber" id="add_menber_style" style="display:none">

                        <ul class=" page-content">
                            <li style="position: relative;left: -5px;"><label class="label_name" style="width: 85px;">打印机编号：</label><span class="add_name"><input id="lpNum" iname="打印机编号" type="text"  class="text_add notnull"/></span><div class="prompt r_f"></div></li>
                            <li><label class="label_name">服务器：</label><span class="add_name"><input id="lpServer" iname="服务器" type="text"  class="text_add notnull"/></span><div class="prompt r_f"></div></li>
                            <li><label class="label_name">描述：</label><span class="add_name"><input id="lpDescribe" iname="描述" type="text"  class="text_add notnull"/></span><div class="prompt r_f"></div></li>
                            <li><label class="label_name" style="width:88px">可打型号：</label><span class="add_name">
                                <select id='model' style='width:200px'>
                                    <option value='48VASA,48VDSD' >48VASA,48VDSD</option>
                                    <option value='64VTHT,64VFFR'>64VTHT,64VFFR</option>
                                </select></span><div class="prompt r_f"></div></li>
                            <div class="prompt r_f"></div>
                            </li>
                            <li><label class="label_name">IP地址：</label><span class="add_name"><input id="ip"  iname="IP地址" type="text"  class="text_add notnull"/></span><div class="prompt r_f"></div></li>
                            <li>
                                <label class="label_name">责任产线：</label>
                                <span class="add_name">
                                    <select id="productionId" iname="责任产线" name='deptId' style='width:200px'>
                                        <option th:each="x : ${deptList}" th:value="${x.id}" th:text="${x.deptName}"></option>
                                    </select>
                                </span>
                                <div class="prompt r_f"></div>
                            </li>
                            <li class="adderss"><label class="label_name">备注：</label><span class="add_name"><input id="remark" iname="备注" type="text"  class="text_add notnull" style=" width:350px"/></span><div class="prompt r_f"></div></li>
                        </ul>
                    </div>
                    <!--编辑打印机图层-->
                    <div class="add_menber" id="add_menber_styl" style="display:none">

                        <form action="" method="post">

                            <ul class=" page-content">
                                <li style="position: relative;left: -5px;"><label class="label_name" style="width: 85px;">打印机编号：</label><span class="add_name"><input id="uppLpNum" name="打印机编号" type="text"  class="text_add uppNotNull"/></span><div class="prompt r_f"></div></li>
                                <li><label class="label_name">服务器：</label><span class="add_name"><input id="uppserver" name="服务器" type="text"  class="text_add uppNotNull"/></span><div class="prompt r_f"></div></li>
                                <li><label class="label_name">描述：</label><span class="add_name"><input id="upplpDescribe" name="描述" type="text"  class="text_add uppNotNull"/></span><div class="prompt r_f"></div></li>
                                <li><label class="label_name" style="width:88px">可打型号：</label><span  class="add_name">
                                    <select id="uppModel" name='model' style='width:200px'>
                                        <option value='48VASA,48VDSD'>48VASA,48VDSD</option>
                                        <option value='64VTHT,64VFFR'>64VTHT,64VFFR</option>
                                    </select></span><div class="prompt r_f"></div></li>
                                <div class="prompt r_f"></div>
                                </li>
                                <li><label class="label_name">IP地址：</label><span class="add_name"><input id="uppIp" name="IP地址" type="text"  class="text_add uppNotNull"/></span><div class="prompt r_f"></div></li>
                                <li>
                                    <label class="label_name">责任产线：</label>
                                    <span class="add_name">
                                        <select id="uppProductionId" name='deptId' style='width:200px'>
                                            <option th:each="x : ${deptList}" th:value="${x.id}" th:text="${x.deptName}"></option>
                                        </select>
                                    </span>
                                    <div class="prompt r_f"></div>
                                </li>
                                <li class="adderss"><label class="label_name">备注：</label><span class="add_name"><input id="upRemake" name="备注" type="text"  class="text_add uppNotNull" style=" width:350px"/></span><div class="prompt r_f"></div></li>
                            </ul>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<!--layui-->
<script>
    $(function () {
        var table = $('#sample-table').dataTable({
        "autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
            searching: false,
            serverSide: true,   //开始服务器分页
            destroy:true,
            bStateSave: true,//状态保存
            ajax: {
                url: '/printer/page',
                type: 'get',
                dataSrc: 'data',
                data: function (message) {

                    var data = $('form').serialize();   //获取查询条件

                    //获取分页信息
                    var pages = {
                        start: message.start,

                        length: message.length,
                    };
                    /*<![CDATA[*/
                    data = data + '&' + $.param(pages);
                    return data;

                }
            },
        columnDefs: [{"defaultContent": "",
            "targets": "_all"}],
            columns: [
            {
                "data": "id", "createdCell": function (td, cellData, rowData, row, col) {
                    /*<![CDATA[*/
                    $(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="yy"  class="ace"><span\n' +
                        '                                            class="lbl"></span></label>');
                }
            },
            {"data": "lpNum"},
            {"data": "lpServer"},
            {"data": "lpDescribe"},
            {"data": "model"},
            {"data": "ip"},
            {"data": "deptName"},
            {"data": "remark"},
            {

                "data": "laser_code", "createdCell": function (td, cellData, rowData, row, col) {
                    $(td).empty().append('  <a title="编辑" onclick="member_edit(this)" href="javascript:;"  class="btn btn-xs btn-info" ><i class="icon-edit bigger-120"></i></a>\n' +
                        '                <a title="删除" href="javascript:;"  onclick="member_del(this,\'1\')" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>');

                }
            },
        ]
    });
     $("#shuxin").on("click",function () {
         table.fnUpdate();
     });

    })


</script>

<!--静态页面的js-->
<script>
    jQuery(function($) {


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            /*<![CDATA[*/if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';/*]]>*/
            return 'left';
        }
    })

    /*查看打印机编号是否存在*/
    function checkLpNo(lpNo){
        var res = false;
        $.ajax({
            url: '/printer/checkLpNo',
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            async:false,
            type: 'post',
            dataType: 'json',
            data: {lpNo:lpNo},
            success: function (e) {
                res = e.rs;
            }
        })
        return res;
    }
    /*查看ip地址是否合法*/
    function IpIsOk(str){
        var g = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;
        return g.test(str);
    }

  /*打印机-添加*/
    $('#member_add').on('click', function(){
        layer.open({
            type: 1,
            title: '添加激光打印机',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : ['800px' , ''],
            content:$('#add_menber_style'),
            btn:['提交','取消'],
            yes:function(index,layero) {
                var num = 0;
                var str = "";
                $('.notnull').each(function (n) {
                    if ($(this).val() == "") {

                        layer.alert(str += "" + $(this).attr("iname") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }

                })

                /*验证打印机编号是否存在*/
                var x = $("#lpNum").val();
                if(checkLpNo(x)){
                    layer.msg("打印机编号已存在", {icon: 2, time: 2000});
                    return false;
                }
                /*验证IP地址是否合法*/
                var ip = $("#ip").val();
                if(!IpIsOk(ip)){
                    layer.msg("IP地址不合法", {icon: 2, time: 2000});
                    return false;
                }

                if (num > 0) {
                    return false;
                } else {
                    $.ajax({
                        url: '/printer/add',
                        data: {
                            "lpNum": $("#lpNum").val()
                            , "lpServer": $("#lpServer").val()
                            , "lpDescribe": $("#lpDescribe").val()
                            , "model": $("#model").val()
                            , "ip": $("#ip").val()
                            , "productionId": $("#productionId").val()
                            , "remark": $("#remark").val()
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.rs) {
                                layer.alert('添加成功！', {
                                    title: '提示框',
                                    icon: 1,
                                });
                                $("#shuxin").click();
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 2000});
                            }
                        }
                    });

                    layer.close(index);
                }
            }
        });
    });
    /*打印机-查看*/
    function member_show(title,url,id,w,h){
        layer_show(title,url+'#?='+id,w,h);
    }
    /*打印机-编辑*/
    function member_edit(id){
        var aa = $(id).parent().parent().find("td:eq(0)").find("label").find("input").val();
        var oldLpNo = '';
        $.ajax({
            url : '/printer/uppInfo',
            type : 'post',
            dataType : 'json',
            data : {
                id : aa
            },
            success : function (d) {
                if (d.rs){
                    var data = d.data;
                    $('#uppLpNum').val(data.lpNum)
                    oldLpNo = data.lpNum;
                    $('#uppserver').val(data.lpServer)
                    $('#upplpDescribe').val(data.lpDescribe)
                    $('#uppModel').val(data.model)
                    $('#uppIp').val(data.ip)
                    $('#uppProductionId').val(data.productionId)
                    $('#upRemake').val(data.remark)
                }
                else {
                    layer.msg(data.msg, {icon: 2, time: 2000});
                }
            }


        })
        layer.open({
            type: 1,
            title: '修改激光打印机信息',
            maxmin: true,
            shadeClose:false, //点击遮罩关闭层
            area : ['800px' , ''],
            content:$('#add_menber_styl'),
            btn:['提交','取消'],
            yes:function(index,layero){
                var num=0;
                var str="";

                $('.uppNotNull').each(function (n) {
                    if ($(this).val() == "") {

                        layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
                            title: '提示框',
                            icon: 0,
                        });
                        num++;
                        return false;
                    }


                });


                var x = $("#uppLpNum").val();
                /*验证打印机编号是否改动*/
                if(x != oldLpNo){
                    /*验证打印机编号是否存在*/
                    if(checkLpNo(x)){
                        layer.msg("打印机编号已存在", {icon: 2, time: 2000});
                        return false;
                    }
                }
                /*验证IP地址是否合法*/
                var uppIp = $("#uppIp").val();
                if(!IpIsOk(uppIp)){
                    layer.msg("IP地址不合法", {icon: 2, time: 2000});
                    return false;
                }

                if(num>0){
                    return false;
                } else{
                    $.ajax({
                        url: '/printer/update',
                        data: {
                            id:aa
                            , "lpNum": $("#uppLpNum").val()
                            , "lpServer": $("#uppserver").val()
                            , "lpDescribe": $("#upplpDescribe").val()
                            , "model": $("#model").val()
                            , "ip": $("#uppIp").val()
                            , "productionId": $("#uppProductionId").val()
                            , "remark": $("#upRemake").val()
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.rs){
                                layer.alert('编辑成功！',{
                                    title: '提示框',
                                    icon:1,
                                });
                                $("#shuxin").click();
                            }else {
                                layer.msg(data.msg, {icon: 2, time: 2000});
                            }

                        }
                    })
                    layer.close(index);
                }
            }
        });
    }
    /*打印机-删除*/
    function member_del(obj,id){

        layer.confirm('确认要删除吗？',function(index){
            var id = $(obj).parent().parent().find("td:eq(0)").find("label").find("input").val()
            $.ajax({
                url:'/printer/delete',
                type:'post',
                dataType:'json',
                data : {id: id},
                success:function (data) {
                    if (data.rs){
                        layer.msg('已删除!',{icon:1,time:1000});
                        $("#shuxin").click();
                    }else {
                        layer.msg(data.msg, {icon: 2, time: 2000});
                    }
                }
            })

            layer.close(index);
        });
    }
    $(function () {

        //全不选

        $("#btnAllNotChk").click(function () {

            $("#chk input:checkbox").removeAttr("checked");

        });

        //全选

        $("#btnAllChk").click(function () {

            $(".ace").attr("checked", "checked");

        });

        //反选

        $("#btnInvert").click(function () {

            $("#chk input:checkbox").each(function () {

                this.checked = !this.checked;

            })
        });
    })

    /**
     * 多删
     */
    $("#delete").click(function () {

        var abc = [];

        //定义一个空数组
        $("input[name='yy']:checked").each(function (i) {    //把所有被选中的复选框的值存入数组
            abc[i] = $(this).val();
        });
        if(abc.length==0){
            layer.alert("请至少选择一条", {
                title: '提示框',
                icon: 0,
            });
            return ;
        }

        $.ajax({
            url:'/printer/deletes',
            type:'post',
            dataType:'json',
            contentType : "application/json;charsetset=UTF-8",
            data : JSON.stringify(abc),
            success:function (data) {
                if (data.rs){
                    layer.msg('已删除!',{icon:1,time:1000});
                    $("#shuxin").click();
                }else {
                    layer.msg(data.msg, {icon: 2, time: 2000});
                }
            }
        })
    })

    /*
    模糊查询
    * */
    $("#btnSearch").click(function () {
        var lpNum = $("#fuzzyNum").val();
        // if(lpNum == ''){
        //     $("#shuxin").click();
        //     return false;
        // }
        var table = $('#sample-table').dataTable({
            "autoWidth": false,//当重复刷新表格时，我的页面会出现变形的，现象，加了这个就好了
            searching: false,
            serverSide: true,   //开始服务器分页
            destroy:true,
            ajax: {
                url: '/printer/search?lpNum='+lpNum,
                type: 'post',
                dataSrc: 'data',
                data: function (message) {

                    var data = $('form').serialize();   //获取查询条件

                    //获取分页信息
                    var pages = {
                        start: message.start,

                        length: message.length,
                    };
                    /*<![CDATA[*/
                    data = data + '&' + $.param(pages);
                    return data;

                }
            },
            columnDefs: [{"defaultContent": "",
                "targets": "_all"}],
            columns: [
                {
                    "data": "id", "createdCell": function (td, cellData, rowData, row, col) {
                        /*<![CDATA[*/
                        $(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="yy"  class="ace"><span\n' +
                            '                                            class="lbl"></span></label>');
                    }
                },
                {"data": "lpNum"},
                {"data": "lpServer"},
                {"data": "lpDescribe"},
                {"data": "model"},
                {"data": "ip"},
                {"data": "deptName"},
                {"data": "remark"},
                {

                    "data": "laser_code", "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('  <a title="编辑" onclick="member_edit(this)" href="javascript:;"  class="btn btn-xs btn-info" ><i class="icon-edit bigger-120"></i></a>\n' +
                            '                <a title="删除" href="javascript:;"  onclick="member_del(this,\'1\')" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>');

                    }
                },
            ]
        });


    })


</script>
